<template>
	<view class="comp-choose-box" :style="{
		marginLeft: offsetLeft + 'px',
	}">
		<scroll-view class="scroll-wrap" scroll-x="true" scroll-left="0" :enable-flex="true">
			<view :class="['scroll-view-item_H',{
				active: current === item.value,
				last: index === list.length - 1,
			}]" v-for="(item,index) in list" :key="index" @tap="onTabItem(item)">
				<view class="item-name">
					{{item.text}}
				</view>
				<text v-if="item.desc" class="item-text">{{item.desc}}</text>
			</view>
		</scroll-view>

	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from "vue";
	
	const props = defineProps({
		current: {
			type: String,
		},
		offsetLeft: {
			type: Number,
			default: 0,
		},
		list: {
			type: Array,
			default: () => [],
		},
	});

	const emits = defineEmits(['change']);

	const onTabItem = (item) => {
		emits('change', item);
	}
	
</script>

<style lang="less" scoped>
	.comp-choose-box {
		position: relative;

		.scroll-wrap {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item_H {
			display: inline-flex;
			vertical-align: middle;
			flex-direction: column;
			gap: 5px;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			height: 72px;
			width: 83px;
			margin-right: 17px;
			background-color: #fff;
			border-radius: 8px;
			padding: 5px 0px;
			border: 1px solid rgba(229, 229, 229, 1);

			&.active {
				border: 2px solid rgba(69, 145, 230, 1);

				.item-text {
					color: rgba(69, 145, 230, 1);
				}
			}

			&.last {
				margin-right: 0;
			}
		}

		.item-name {
			font-size: 14px;
			line-height: 20px;
			color: rgba(56, 56, 56, 1);
		}

		.item-text {
			font-size: 12px;
			line-height: 18px;
			color: rgba(166, 166, 166, 1);
		}
	}
</style>